<template>
	<div class="somefunctions" :style="{width:width+'px'}">
		<!--功能展开箭头-->
		<div v-show="!sinIsShow" @click="toggle()" class="togg">
			<van-icon name="upgrade" />	
		</div>
		<div class="Unit" v-if="sinIsShow">
			<!--签到signType：1是手动签到，2是定时签到-->
			<div @click="saveSign(1)" v-if="checkLikeStatus">
				<img :src="thumbStatus==true?'static/img/tp3.png':'static/img/tp2.png'" alt>
				<label>点赞</label>
			</div>
			<!-- <div @click="saveSign(2)">
				<img src="static/img/qd2.png" alt>
				<label>签到</label>
			</div> -->
			<!--抽奖-->
			<!-- <img src="../../../static/img/icon_lottery.png" @click="saveSign(2)" alt> -->
			<!--投票-->
			<!-- <div @click="saveSign(3)">
				<img src="../../../static/img/dz2.png" alt>
				<label>投票</label>
			</div> -->
			<!-- <div @click="saveSign(4)">
				<img src="../../../static/img/icon_share.png" alt>
				<label>邀请</label>
			</div> -->
			<div @click="toggle()" style="border: 0;padding: 10px;font-size: 16px;color:#999;">
				 </div> <!--打赏-->
					<!-- <img src="static/img/icon_reward.png" @click="saveSign(4)" alt> -->
					<!--红包-->
					<!-- <img src="../../../static/img/icon_red.png" @click="saveSign(5)" alt> -->
					<!--提现-->
					<!-- <img src="../../../static/img/icon_carsh.png" @click="saveSign(6)" alt> -->
					<!--邀请-->
					<!-- <img src="../../../static/img/icon_share.png" @click="saveSign(7)" alt> -->
			</div>
		</div>
</template>

<script>
	export default {
		data() {
			return {
				arrow: "arrow-left",
				unitShow: true,
				jintou: false,
				sinIsShow: false,
				width: 45,
				time: "",
				likeStatus:false
			};
		},
		computed: {
			liveInfo() {
				return this.$store.state.liveInfo;
			},
			thumbStatus(){
                return this.$store.state.thumbStatus;
			},
			checkLikeStatus(){
				if(this.liveInfo.thumbSwitch == 1){
                    this.likeStatus = true;
				}else{
                    this.likeStatus = false;
				}
				return this.likeStatus; 
			}
		},
		created(){
			this.checkThumb();
		},
		mounted() {
			this.$nextTick(() => {
				this.TimingcheckIn();
			});
		},
		methods: {
			TimingcheckIn() {
				var info = this.$store.state.liveInfo;
				if (info.signType == 2) {
					this.$store.state.signTime = info.signTime * 60; // 分换成秒
					this.time = setInterval(() => {
						if (this.$store.state.signTime > 0) {
							this.$store.state.signTime--;
						} else {
							this.$store.state.signTime = 0;
							this.$toast('签到已开启');
							clearInterval(this.time);
						}
					}, 1000);
				}
			},
			toggle() {
				this.sinIsShow = !this.sinIsShow;
				var icon = document.getElementsByClassName("el-icon-d-arrow-left")[0];
				var somefunctions = document.getElementsByClassName("somefunctions")[0];
				if (this.sinIsShow) {
					this.width = 50;
					this.arrow = "arrow";
					somefunctions.style.transition = "0.2s";
				} else {
					this.width = 45;
					this.arrow = "arrow-left";
					somefunctions.style.transition = "0.2s";
				}
			},
			// 查询点赞状态
			checkThumb(){
				var openId=""
				if(sessionStorage.getItem("openid")){
					openId = sessionStorage.getItem("openid");
				}else{
					openId =localStorage.getItem("youkeId")
				}
                this.$http.get(this.$api.thumbStatus(),{params:{
					roomId : this.$route.params.id,
					openId : openId
				}}).then(res => {
				    if (res.data.code == 0) {
						this.$store.state.thumbStatus = res.data.status
					}else{
						alert(res.data.msg)
					}
			   });
			},
			saveSign(e) {
				var info = this.$store.state.liveInfo;
				var openId=""
				if(sessionStorage.getItem("openid")){
					openId = sessionStorage.getItem("openid");
				}else{
					openId =localStorage.getItem("youkeId")
				}
				if (e == 1) {
					// 点赞
					let data = new FormData();
					data.append("roomId", this.$route.params.id);
					data.append("openId", openId);
					this.$http.post(this.$api.saveThumb(), data).then(res => {
						if (res.data.code == 0) {
							this.checkThumb();
						} else {
							this.$toast(res.data.msg)
						}
					});
				} else if (e == 2) {
					if (info.signType == 0) {
						this.$toast('签到未开启');
					} else {
						if (this.$store.state.signPhone) {
							let data = new FormData();
							data.append("roomId", this.$route.params.id);
							data.append("openId", openId);
							data.append("phone", this.$store.state.signPhone);
							this.$http.post(this.$api.saveSign(), data).then(res => {
								if (res.data.code == 0) {
									this.$toast(res.data.msg, "success")
								} else {
									this.$toast(res.data.msg, "error")
								}
							});
						} else {
							this.$store.state.moveShow = true;
							this.$store.state.liveImgShow = false;
							this.$store.state.menuNum = e;
						}
					}
				} else if (e == 3) {
					this.$store.state.menuNum = e;
					this.$emit("getQuestionInfo")
				}else if (e == 4) {
					this.$store.state.menuNum = e;
					this.$store.state.moveShow = true;
					this.$store.state.liveImgShow = false;
				}
			}
		}
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	.togg {
		background: #fff;
		box-shadow: 0px 2px 6px rgba(0, 0, 0, .2);
		border-radius: 5px 0 0 5px;
		padding: 10px;
	}

	.somefunctions {
		display: flex;
		align-items: center;
		position: fixed;
		right: 0;
		bottom: 45px;

		.Unit {
			text-align: center;
			background: #fff;
			border-radius: 5px;
			box-shadow: 0px 2px 6px rgba(0, 0, 0, .2);

			div {
				padding: 5px;
				font-size: 10px;
				border-bottom: 1px solid #f1f1f1;

				img {
					width: 30px;
					cursor: pointer;
					vertical-align: top;
				}
			}

		}
	}

	.van-icon-wap-nav {
		font-size: 30px;
	}
	.van-icon-upgrade{
		font-size: 30px;
	}
</style>
